<template>
    <el-dialog
            title="添加净化词"
            :visible.sync="visible"
            width="30%"
            >
        <div>
            <el-form
                    label-position="right"
                    label-width="80px"
                    size="small"
                    :model="opts"
                    :rules="rules"
                    ref="editor"
            >
                <el-form-item
                        label="关键词"
                        prop="keyword">
                    <el-input
                            v-model="opts.keyword"
                    ></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="visible = false" size="small">取 消</el-button>
            <el-button type="primary" @click="onClick" size="small">确 定</el-button>
        </div>
    </el-dialog>

</template>

<script lang="ts">

    import {Vue,Component,Prop,} from 'vue-property-decorator'
    import {Api} from '@/api/clean'

    @Component({
        name: 'AdminAddKeyword',
    })
    export default class AdminAddKeyword extends Vue{


        visible:boolean = false;
        star_id:string = "";
        opts = {
            keyword:""
        };

        rules = {
            keyword: [{required:true, message:"请输入关键词"}]
        };

        show(star_id:string) {
            this.visible = true;
            this.star_id = star_id;
        }

        onClick() {

            let editor:any = this.$refs['editor'];

            editor.validate((valid:boolean) => {

                if (valid) {

                    console.log(this.star_id,this.opts.keyword);
                    Api.Clean.AddKeyword({
                        star_id:this.star_id,
                        keyword:this.opts.keyword,
                    }).then((ack)=>{
                        this.$message({
                            type:"success",
                            message:`添加成功.`
                        });
                        this.visible = false;
                        this.$emit('change');
                    });
                }
            })
        }
    }
</script>

<style scoped>

</style>